<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<meta http-equiv="X-UA-Compatible" content="ie=edge" />
		<title>Document</title>
	</head>

	<body>
		<div id="content" style="height: 150px; line-height: 150px; text-align: center; color: #fff; background-color: #ccc; font-size: 80px"></div>
		<script>
			let num = 1;
			let content = document.getElementById('content');
			function count(e) {
				content.innerHTML = num++;
			}

			/* 防抖  触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间 */
			function debounce(func, wait, immediate) {
				let timeout;
				return function () {
					let _that = this;
					let args = arguments;
					if (timeout) clearTimeout(timeout);
					if (immediate) {
						var callNow = !timeout;
						timeout = setTimeout(() => {
							timeout = null;
						}, wait);
						if (callNow) func.apply(_that, args);
					} else {
						timeout = setTimeout(function () {
							func.apply(_that, args);
						}, wait);
					}
				};
			}
			content.onmousemove = debounce(count, 1000, true);

			/* 节流 高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率 */
			// function throttle(count, wait) {
			//     let previous = 0;
			//     return function () {
			//         let now = Date.now();
			//         let _that = this;
			//         let args = arguments;
			//         if (now - previous > wait) {
			//             count.apply(_that, args);
			//             previous = now;
			//         }
			//     }
			// }
			// content.onmousemove = throttle(count, 1000);
		</script>
	</body>
</html>
